<template>
  <div>
    <div class="content">
      <div class="index_hot">
        <div class="index_hot_menu">
          <span :class="{active:isactive==0}" @click="sortBtn(0)">综合排序</span>
          <span :class="{active:isactive==1}" @click="sortBtn(1)">价格由高到低</span>
          <span :class="{active:isactive==2}" @click="sortBtn(2)">价格由低到高</span>
          <em>
            <input type="text" v-model="priceGt" />-
            <input type="text" v-model="priceLte" />
            <input type="button" value="价格筛选" @click="priceBtn()" />
          </em>
        </div>
        <div class="index_hot_main">
          <ul>
            <li v-for="(item,i) in allList" :key="i">
              <img :src="item.productImageUrl" @click="toLink(item.productId)"/>
              <p>
                {{item.productName}}
                <br>
                {{item.salePrice}}元
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        allList: [],
        page: 1,
        size: 6,
        sort: null,
        priceGt: null,
        priceLte: null,
        isactive: 0,
      }
    },
    methods: {
     toLink(pid) {
       this.$router.push({
         path: `detail?productid=${pid}`
       })
     },
      sortBtn(i) {
        this.isactive = i
      },
      sortBtn(i) {
        this.isactive = i
        if (i == 0) {
          this.sort = null
          this.getAll()
        }
        if (i == 1) {
          this.sort = 1
          this.getAll()
        }
        if (i == 2) {
          this.sort = -1
          this.getAll()
        }
      },
      priceBtn() {
        if (this.priceLte > this.priceGt) {
          this.getAll()
        }
      },

      getAll() {
        this.$axios({
          methods: 'get',
          url: `http://api.mm2018.com:8095/api/goods/allGoods?page=
           ${this.page}&size=${this.size}&sort=${this.sort}&priceGt=${this.priceGt}
           &priceLte=${this.priceLte}`
        }).then(res => {
          //console.log(res)
          this.allList = res.data.data
        })
      }
    },
    created() {
      this.getAll()
    },
  }
</script>
<style scoped>
  <style scoped>
    .active {
      color: #333;
    }

    ul {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
    }

    .content {
      width: 1140px;
      height: auto;
      margin: 0 auto;
      overflow: hidden;
    }

    .index_hot {
      width: 100%;
    }

    .index_hot_menu {
      width: 100%;
      height: 40px;
      background: #348408;
      margin-top: 50px;
      line-height: 40px;
      color: #fff;
      text-indent: 20px;
    }

    .index_hot_menu span {
      padding-right: 25px;
    }



    .index_hot_main {
      width: 100%
    }

    .index_hot_main ul {
      display: flex;
      flex-flow: wrap;
      justify-content: space-between;
      padding-top: 50px;
    }

    .index_hot_main ul li {
      width: 360px;
      margin-bottom: 30px;
    }

    .index_hot_main ul li img {
      width: 360px;
      height: 268px;
    }

    .index_hot_main ul li p {
      text-align: center;
      line-height: 30px;
      margin: 0px;
      padding: 0px;
      padding-top: 20px;
    }

    .index_productlist {
      width: 100%;
      height: auto;
      padding-top: 50px;
      overflow: hidden;
    }

    .index_productlist_left {
      width: 545px;
      height: auto;
      float: left;
    }

    .index_productlist_left img {
      display: block;
      width: 545px;
      height: 400px;
    }

    .index_productlist_right {
      width: 585px;
      float: right;
    }

    .index_productlist_right ul {
      display: flex;
      justify-content: space-around;
      flex-flow: wrap
    }

    .index_productlist_right ul li {
      width: 275px;
      height: 190px;
      overflow: hidden;
      margin-bottom: 20px;
    }



    .index_productlist_right ul li img {
      width: 275px;
      height: 190px;
      display: block;
    }
</style>
